<template>
  <div class="app-container">
    <content-card>
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        fit
        class="table-container"
        highlight-current-row
      >
        <el-table-column
          fixed
          label="ID"
          width="80"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.$index +1 }}
          </template>
        </el-table-column>
        <el-table-column
          label="用户名"
          width="150"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.username }}
          </template>
        </el-table-column>
        <el-table-column
          label="手机号"
          width="120"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.mobile }}
          </template>
        </el-table-column>
        <el-table-column
          label="邮箱"
          align="center"
        >
          <template slot-scope="scope">
            {{ scope.row.email }}
          </template>
        </el-table-column>

        <el-table-column
          label="注册时间"
          width="160"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.created_at }}</span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="200"
          align="center"
        >
          <template slot-scope="scope">
            <el-button-group>
              <el-button
                type="danger"
                icon="el-icon-delete"
                size="mini"
                @click="del(scope)"
              >
                删除
              </el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
        @pagination="fetchData"
      />
    </content-card>
  </div>
</template>

<script>
import { get_users as getUsers, remove_user } from '@/api/role'
import Pagination from '@/components/Pagination/index'
import ContentCard from '@/components/ContentCard'
export default {
  components: {
    Pagination,
    ContentCard
  },
  data() {
    return {
      total: 0,
      list: [],
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        created_at: undefined,
        status: undefined,
        keyword: undefined
      },
      roles_id: ''
    }
  },
  created() {
    this.roles_id = this.$route.query.role_id
    this.fetchData()
  },
  methods: {
    fetchData() {
      const obj = { role_id: this.roles_id }
      getUsers(obj).then(response => {
        this.list = response.data.list
        this.total = response.data.total_count
        this.listLoading = false
      })
    },
    del(scope) {
      this.$confirm('确认删除该条数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const obj = {
          user_id: scope.row.id,
          role_id: this.roles_id
        }
        remove_user(obj).then(response => {
          setTimeout(() => {
            this.list.splice(scope.$index, 1)
            this.$message({
              message: '删除成功',
              type: 'success'
            })
          }, 300)
        })
      })
    }
  }
}
</script>

<style scoped>

</style>
